<template>
  <tr>
    <td><input type="checkbox" v-model="change" /></td>
    <td>{{ this.uname }}</td>
    <td>{{ this.price }}</td>
    <td>
      <button @click.prevent="sub">-</button>
      {{ this.num }}
      <button @click.prevent="sum">+</button>
    </td>
    <td>
      {{ this.price * this.num }}
    </td>
    <td><button @click.prevent="del">删除</button></td>
  </tr>
</template>

<script>
export default {
  // data() {
  //   return {
  //     checked: 'true',
  //   }
  // },
  props: ['uname', 'price', 'num', 'checked', 'index'],
  methods: {
    del() {
      this.$emit('del', this.index)
    },
    sum() {
      this.$emit('sum', this.index, this.num, this.price)
    },
    sub() {
      this.$emit('sub', this.index, this.num, this.price)
    },
  },
  computed: {
    change: {
      get() {
        return this.checked
      },
      set(val) {
        this.$emit('checkedAll', val, this.index)
      },
    },
  },
}
</script>

<style scoped>
tr {
  text-align: center;
}
</style>
